<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <script src="vue.min.js"></script>
    </head>
    <body>
        			<ul id="app">
				<li v-for="(detail,index) in list">
					<span>{{index}}-{{detail}}</span>
				</li>
			</ul>
			<div id="mainapp">
				<div>{{parent.name}}</div>
				<span>children2</span>
				<children2></children2>
				<br/>
				<span>children</span>
				<children detail="test"></children>
				<children :detail="parent.name"></children>
			</div>

			<!-- 编辑页面切换，查看视图和编辑视图 -->
			<div id="datashow">
				<div>
					<button v-show="show" v-on:click="edit" type="button">编辑</button>
					<button v-show="!show" v-on:click="save">保存</button>
					<button v-show="!show" v-on:click="cancel">取消</button>
				</div>
				<div v-show="show">
					{{message}}
				</div>
				<div v-show="!show">
					<input v-model="message" type="text" name="val1" value="">
				</div>
            </div>
            



            <script type="text/x-template" id="tpl">
            	<span>{{detail}}</span>
            	<span>{{text111}}</span>
            </script>

            <script type="text/x-template" id="tpl2">
            	<span>{{text}}</span>
            </script>

            <script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				list:[]
			},
			methods:{}
		});

		app.list.push("test");

	Vue.component('children', {       
	     template: '<span>{{ text111 }}</span><span>{{detail}}</span>',   
	     props : ['detail'],     
	      data: function () {            
	          return {                
	              text111: '这里是子组件的内容'            
	          }        
	      }    
	});

	Vue.component('children2', {       
	     template: '#tpl2',   
	      data: function () {            
	          return {                
	              text: '这里是子组件的内容'            
	          }        
	      }    
	});

	var parent1 = new Vue({       
	        el: '#mainapp',        
	        data: {            
	            parent: {               
	                 name:'这里是父组件的内容'            
	            }            
	         }   
	 })


	var datashow = new Vue({
		el:"#datashow",
		data:{
			message:"test",
			show:true
		},
		methods:{
			edit:function(){
				this.show = false;
				console.log(datashow.show)
			},
			save:function(){
				this.show = true;
				console.log(datashow.message)
			},
			cancel:function(){
				this.show = true;
			}
		}
	})
		</script>
    </body>
</html>